import React, { FC } from "react";
import styles from "./EditCanvas.module.scss";
import { Spin } from "antd";
// 引入组件
import QuestionTitle from "../../../components/QuestionComponents/QuestionTitle/component";
import QuestionInput from "../../../components/QuestionComponents/QuestionInput/component";
import useGetComponentInfo from "../../../hooks/useGetComponentInfo";
import { getComponentConfByType } from "../../../components/QuestionComponents/index";
import { ComponentInfoType } from "../../../store/componentsReducer";

type PropsType = { loading: boolean };

const EditCanvas: FC<PropsType> = ({ loading }) => {
  const { componentList } = useGetComponentInfo();
  // 渲染组件
  function genComponent(componentInfo: ComponentInfoType) {
    const { type, props } = componentInfo;
    const componentConf = getComponentConfByType(type);
    if (componentConf == null) return null;
    const { Component } = componentConf;
    return <Component {...props} />;
  }

  if (loading) {
    return (
      <div style={{ textAlign: "center", marginTop: "60%" }}>
        <Spin tip="Loading" size="large">
          {" "}
        </Spin>
      </div>
    );
  }

  return (
    <div className={styles.canvas}>
      {componentList.map((item) => {
        const { fe_id } = item;
        return (
          <div key={fe_id} className={styles["component-wrapper"]}>
            <div className={styles.component}>{genComponent(item)}</div>
          </div>
        );
      })}
    </div>
    // 以下👇是静态结构
    // <div className={styles.canvas}>
    //   <div className={styles["component-wrapper"]}>
    //     <div className={styles.component}>
    //       <QuestionTitle />
    //     </div>
    //   </div>
    //   <div className={styles["component-wrapper"]}>
    //     <div className={styles.component}>
    //       <QuestionInput />
    //     </div>
    //   </div>
    // </div>
  );
};
export default EditCanvas;
